<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>章节练习</title>
    <meta content="IE=edge,Chrome=1" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
          name="viewport">
    <script src="/static/section_exercise/js/adaptation.js" type="text/javascript"></script>
    <script src="/static/vue.js"></script>
    <style type="text/css">
        #__previewImage-container {
            -ms-touch-action: none;
            touch-action: none;
            -webkit-touch-action: none;
            line-height: 100vh;
            background-color: #000;
            width: 100vw;
            height: 100vh;
            position: fixed;
            overflow: hidden;
            top: 0;
            left: 0;
            z-index: 2147483647;
            transition: transform .3s;
            -ms-transition: transform .3s;
            -moz-transition: transform .3s;
            -webkit-transition: transform .3s;
            -o-transition: transform .3s;
            transform: translate3d(100%, 0, 0);
            -webkit-transform: translate3d(100%, 0, 0);
            -ms-transform: translate3d(100%, 0, 0);
            -o-transform: translate3d(100%, 0, 0);
            -moz-transform: translate3d(100%, 0, 0)
        }

        #__previewImage-container .previewImage-text {
            position: absolute;
            top: .6em;
            text-align: center;
            font-size: 18px;
            line-height: 25px;
            color: #fff;
            z-index: 10;
            padding: 0.2em 0.4em;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            letter-spacing: 0;
            right: .8em
        }

        #__previewImage-container .previewImage-text .previewImage-text-index {
            font-size: 24px;
        }

        #__previewImage-container .previewImage-box {
            width: 999999rem;
            height: 100vh
        }

        #__previewImage-container .previewImage-box .previewImage-item {
            width: 100vw;
            height: 100vh;
            margin-right: 15px;
            float: left;
            text-align: center;
        }

        #__previewImage-container .previewImage-box .previewImage-item.previewImage-nobackground {
            background: none
        }

        #__previewImage-container .previewImage-box .previewImage-item .previewImage-image {
            vertical-align: middle;
            width: 100%
        }
    </style>
    <link rel="stylesheet" href="/static/section_exercise/css/style.css?v=23746482728373846463829">
</head>
<body>
<div id="app" v-cloak>
    <div class="content">
        <div class="overlay" id="overlay"></div>
        <transition name="slide-fade" v-for="(item, index) in problem">
            <div class="content-item" v-if="tag.index === index">
                <div class="problem">
                    <div class="problem-tag">
                        <span class="tag1">{{ index + 1 }}</span>
                        <span class="tag2">/</span>
                        <span class="tag3">{{ tag.end }}</span>
                    </div>
                    <div class="problem-content">
                        <p class="problem-content-text">{{ item.title }}</p>
                        <div class="img-box" v-if="item.title_img !== ''">
                            <img :src="item.title_img" v-on:click="previewImages(item.title_img)" alt="">
                        </div>
                    </div>
                    <div class="problem-option">
                        <div :class="(option[index] && 'A' == option[index])? (option[index] == item.answer ? 'active-success' : 'active-error') : ''"
                             class="option-item"
                             v-on:click="answerSelect('A')">
                            <div class="item-title">A.</div>
                            <div class="item-content">{{item.optionA}}</div>
                        </div>
                        <div :class="(option[index] && 'B' == option[index])? (option[index] == item.answer ? 'active-success' : 'active-error') : ''"
                             class="option-item"
                             v-on:click="answerSelect('B')">
                            <span class="item-title">B.</span>
                            <div class="item-content">{{item.optionB}}</div>
                        </div>
                        <div :class="(option[index] && 'C' == option[index])? (option[index] == item.answer ? 'active-success' : 'active-error') : ''"
                             class="option-item"
                             v-on:click="answerSelect('C')">
                            <div class="item-title">C.</div>
                            <div class="item-content">{{item.optionC}}</div>
                        </div>
                        <div :class="(option[index] && 'D' == option[index])? (option[index] == item.answer ? 'active-success' : 'active-error') : ''"
                             class="option-item"
                             v-on:click="answerSelect('D')">
                            <div class="item-title">D.</div>
                            <div class="item-content">{{item.optionD}}</div>
                        </div>
                    </div>
                </div>
                <div class="result" v-if="option[index]">
                    <div :class="(option[index] && item.answer == option[index])? 'result-success':'result-error'"
                         class="result-msg">
                        <img :src="(option[index] && item.answer == option[index])? icon.success :icon.error"
                             alt="" class="result-icon">
                        <span class="result-text">回答{{(option[index] && item.answer == option[index])? '正确':'错误'}}</span>
                    </div>
                    <div class="result-success-option">正确答案： {{item.answer}}</div>
                    <div class="result-content">
                        <p class="result-content-title">解析</p>
                        <p class="result-content-text">{{item.analysis}}</p>
                    </div>
                </div>
            </div>
        </transition>
    </div>
    <div class="floor">
        <div class="floor-box floor-box-left">
            <button :class="(tag.index <= 0) ? 'button-disabled' : ''" class="last" v-bind:disabled="tag.index <= 0"
                    v-on:click="indexChange(-1)">上一题
            </button>
        </div>
        <div class="floor-box floor-box-right">
            <button :class="(option[tag.index]) ? '' : 'button-disabled'" class="next"
                    v-bind:disabled="!(option[tag.index])" v-on:click="indexChange(1)">{{(tag.index == tag.end -
                1)?'完成':'下一题'}}
            </button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/section_exercise/js/md5.js"></script>
<script type="text/javascript" src="/static/section_exercise/js/previewImage.min.js"></script>
<script type="text/javascript">
    var apptype = '{$appType}';
    var callbackUrl = '{$callbackUrl}';
    imgStatus = 0;

    function success() {
        try {
            switch (apptype) {
                case 'android':
                    exercise.success();
                    break;
                case 'ios':
                    window.webkit.messageHandlers.jsToOcSuccess.postMessage({});
                    break;
                case 'wap':
                    // alert('success')
                    console.log('wap sucess');
                    window.location.href = decodeURIComponent(callbackUrl);
                    break;
                default:
            }
        } catch (e) {
        }
    }

    function submit() {
        try {
            switch (apptype) {
                case 'android':
                    exercise.submit();
                    break;
                case 'ios':
                    window.webkit.messageHandlers.jsToOcSubmit.postMessage({});
                    break;
                case 'wap':
                    // alert(callbackUrl)
                    console.log('wap submit url=' + decodeURIComponent(callbackUrl));
                    // window.location.href=callbackUrl;
                    break;
                default:
            }
        } catch (e) {
        }
    }

    function back() {
        if (imgStatus === 0) {
            try {
                switch (apptype) {
                    case 'android':
                        exercise.success();
                        break;
                    case 'ios':
                        window.webkit.messageHandlers.jsToOcSuccess.postMessage({});
                        break;
                    default:
                }
            } catch (e) {
            }
        } else {
            document.getElementById('__previewImage-container').style.display = 'none';
            imgStatus = 0;
        }
    }

    var app = new Vue({
        el: "#app",
        data: {
            icon: {
                success: '/static/section_exercise/img/success.png',
                error: '/static/section_exercise/img/error.png'
            },
            tag: {
                index: 0,
                end: 5
            },
            problem: {$sectionExerciseData},
            option: [],
        },
        watch: {
            option: function (newValue) {
                this.option = newValue;
            }
        },
        mounted: function () {
            this.init();
        },
        methods: {
            // 初始化
            init: function () {
                this.tag.end = this.problem.length;
            },
            // 答题
            answerSelect: function (index) {
                // 判断已经有答案不答题
                if (this.option[this.tag.index]) {
                    return false;
                }
                // 判断最后一题触发提交
                if (this.tag.index == this.tag.end - 1) {
                    submit();
                }
                // 更新当前题目答案
                this.option.push(index);
            },
            // 题目切换
            indexChange: function (val) {
                // 判断是否是在第一题时 点击上一题   第一题不能点击上一题
                if (val == -1 && this.tag.index <= 0) {
                    return false;
                }
                // 判断当前题目是否已经答题
                if (val == 1 && !this.option[this.tag.index]) {
                    return false;
                }
                // 答完题 点击完成时触发
                if (val == 1 && this.tag.index >= this.tag.end - 1) {
                    success();
                    return false;
                }
                this.tag.index = this.tag.index + val;
            },
            previewImages: function (url) {
                if (apptype == 'android') {
                    exercise.previewImages(url);
                } else {
                    var obj = {
                        urls: [url],
                        current: url
                    };
                    previewImage.start(obj);
                }
            }
        }
    });
</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?ea40240db5d97c4e67b093161e42c792";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>
